import React, { useState, useEffect } from 'react';
import { Layout, Typography, Button, Space, Tooltip, message } from 'antd';
import { 
  RobotOutlined, 
  InfoCircleOutlined, 
  GithubOutlined,
  SettingOutlined 
} from '@ant-design/icons';
import { systemAPI } from '../services/api';

const { Header: AntHeader } = Layout;
const { Title } = Typography;

const Header = () => {
  const [systemInfo, setSystemInfo] = useState(null);
  const [loading, setLoading] = useState(false);

  // 获取系统信息
  const fetchSystemInfo = async () => {
    try {
      setLoading(true);
      const info = await systemAPI.getSystemInfo();
      setSystemInfo(info);
    } catch (error) {
      console.error('获取系统信息失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 显示系统信息
  const showSystemInfo = () => {
    if (systemInfo) {
      message.info({
        content: `${systemInfo.app_name} v${systemInfo.version} - ${systemInfo.status}`,
        duration: 3,
      });
    } else {
      fetchSystemInfo();
    }
  };

  useEffect(() => {
    fetchSystemInfo();
  }, []);

  return (
    <AntHeader 
      style={{ 
        background: '#fff', 
        padding: '0 24px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <RobotOutlined 
          style={{ 
            fontSize: '24px', 
            color: '#1890ff', 
            marginRight: '12px' 
          }} 
        />
        <Title 
          level={3} 
          style={{ 
            margin: 0, 
            color: '#1890ff',
            fontWeight: 600
          }}
        >
          系统操作助手
        </Title>
      </div>

      <Space>
        <Tooltip title="系统信息">
          <Button 
            type="text" 
            icon={<InfoCircleOutlined />}
            loading={loading}
            onClick={showSystemInfo}
          />
        </Tooltip>
        
        <Tooltip title="设置">
          <Button 
            type="text" 
            icon={<SettingOutlined />}
            onClick={() => message.info('设置功能开发中...')}
          />
        </Tooltip>

        <Tooltip title="GitHub">
          <Button 
            type="text" 
            icon={<GithubOutlined />}
            onClick={() => window.open('https://github.com', '_blank')}
          />
        </Tooltip>
      </Space>
    </AntHeader>
  );
};

export default Header;
